<template>
	<view class="">
		<view class="line-tabs">
			<view class="" style="text-align: center;margin-top: 50rpx;" v-if="list_s3NekBAM.length==0">
				<image src="../../static/no.png" mode="scaleToFill"
					style="margin-top: 100rpx;width: 300rpx;height: 300rpx;"></image>
				<view class="" style="color: #999;font-size: 28rpx;margin-top: 20rpx;">
					暂无优惠券
				</view>
			</view>
			<view class="justify-between list-item" :key="i" v-for="(item, i) in list_s3NekBAM">
				<view class="flex-row">
					<view class="flex-col group_2">
						<text class="text_4">{{item.money}}</text>
						<text class="text_6">元</text>
					</view>
					<view class="flex-row group_3">
						<!-- <view class="section_5"></view> -->
						<view class="flex-col group_4">
							<view class="flex-row">
								<text class="text_8">{{item.name}}</text>
								<!-- <view class="flex-col text-wrapper"><text class="text_10">新人专属</text></view> -->
							</view>
							<text class="text_12">截止到 {{item.endTime}} 过期</text>
						</view>
					</view>
				</view>
				<view class="flex-col items-center text-wrapper_1" @click="dianji(item.expertsId,item.name)"><text
						class="text_14">立即使用</text></view>
			</view>
			<view class="" v-show="isOver">
				<u-loadmore :status="status" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getcouponlist
	} from "../../api/index.js"
	export default {
		components: {},
		data() {
			return {
				list_s3NekBAM: [],
				pageNum: 1,
				pageSize: 10,
				status: 'loading ',
				isOver: false
			};
		},
		//下拉到底部后加载新数据
		onReachBottom() {
			this.isOver = true;
			this.pageNum++; //页数加一
			this.goload(); //回调接口
		},
		created() {
			this.goload()
		},
		methods: {
			dianji(expertsId, name) {
				console.log(name);
				if (name == '包月抵扣券') {
					uni.navigateTo({
						url: `/pages/huaban_1_kaobei_5/huaban_1_kaobei_5?id=${expertsId}`
					});
				} else if (name == '下载券') {
					uni.redirectTo({
						url: '/pages/index/index?baoike=baoike'
					})
				} else if (name == '围观券') {
					uni.redirectTo({
						url: '/pages/index/index?baoike=subscribe'
					})
				}

			},
			async goload() {
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				getcouponlist(data).then(res => {
					console.log(res)
					const count = res.total
					if (this.list_s3NekBAM.length === count) {
						return
					}
					
					this.list_s3NekBAM = [...this.list_s3NekBAM, ...res.rows]
				})
			},
			onClickImage() {
				uni.navigateBack();
			},
		},
	};
</script>

<style scoped lang="css">
	.list-item {
		padding: 1.25rem 0.94rem 1.06rem 1.06rem;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558132697497859310.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
	}

	.text-wrapper_1 {
		padding: 0.47rem 0 0.5rem;
		align-self: center;
		background-color: #d6b980;
		border-radius: 0.84rem;
		width: 4.5rem;
		height: 1.69rem;
	}

	.group_2 {
		margin-top: 0.63rem;
		position: relative;
	}

	.group_3 {
		margin-left: 0.75rem;
	}

	.text_14 {
		color: #ffffff;
		font-size: 0.75rem;
		font-family: SourceHanSansCN;
		line-height: 0.72rem;
		text-transform: uppercase;
	}

	.text_4 {
		margin-right: 0.25rem;
		color: #fea14a;
		font-size: 1.91rem;
		font-family: SourceHanSansCN;
		font-weight: 700;
		line-height: 1.47rem;
		text-transform: uppercase;
	}

	.text_6 {
		color: #fea14a;
		font-size: 0.63rem;
		font-family: SourceHanSansCN;
		line-height: 0.53rem;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.section_5 {
		opacity: 0.06;
		background-color: #d6bd94;
		width: 0.031rem;
		height: 3.09rem;
		border: dashed 0.031rem #000000;
	}

	.group_4 {
		margin-left: 0.88rem;
		align-self: center;
	}

	.text_12 {
		margin-top: 0.61rem;
		align-self: flex-start;
		color: #957f59;
		font-size: 0.63rem;
		font-family: SourceHanSansCN;
		line-height: 0.59rem;
	}

	.text_8 {
		margin-bottom: 0.094rem;
		color: #957f59;
		font-size: 0.94rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.81rem;
	}

	.text-wrapper {
		margin-left: 0.28rem;
		padding: 0.22rem 0 0.19rem;
		flex-shrink: 0;
		background-color: #e65943;
		background-image: linear-gradient(-90deg, #e65943 0%, #f67a66 100%, #f67a66 100%);
		border-radius: 0px 0.47rem 0.47rem 0.47rem;
		height: 0.94rem;
	}

	.text_10 {
		margin: 0 0.28rem;
		color: #ffffff;
		font-size: 0.56rem;
		font-family: SourceHanSansCN;
		line-height: 0.53rem;
	}

	.page {
		background-color: #ffffff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 3rem 0.91rem 1rem;
		background-color: #6d79fe;
		background-image: linear-gradient(-45deg, #6d79fe 0%, #96a3ff 100%);
		position: relative;
	}

	.line-tabs {
		height: 36.28rem;
		width: 92vw;
		margin: 0 auto;
	}

	.image {
		position: absolute;
		left: 0.91rem;
		width: 0.63rem;
		height: 1.06rem;
	}

	.text {
		color: #ffffff;
		font-size: 1.06rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 1rem;
	}

	.section_2 {
		padding: 0 2.09rem 0.094rem 2.22rem;
		background-color: #6d79fe;
	}

	.list {
		margin: 0.81rem 0.88rem -3.41rem 1rem;
		background-color: #ffffff;
		border-radius: 0 0.31rem 0.31rem 0;
	}

	.group {
		padding-bottom: 0.19rem;
		position: relative;
	}

	.section_3 {
		align-self: center;
		background-color: #ffffff;
		border-radius: 0.078rem;
		width: 3.44rem;
		height: 0.16rem;
	}

	.text_1 {
		color: #ffffff;
		font-size: 0.88rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.84rem;
	}

	.text_2 {
		color: #ffffff;
		font-size: 0.88rem;
		font-family: SourceHanSansCN;
		line-height: 0.84rem;
	}

	.text_3 {
		color: #ffffff;
		font-size: 0.88rem;
		font-family: SourceHanSansCN;
		line-height: 0.84rem;
	}
</style>
